<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Remote Filtering on DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="./libs/jquery/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./libs/jquery/easyui/themes/icon.css">
    <script type="text/javascript" src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/jquery/jquery.easyui.min.js"></script>

</head>
<body>
<h2>Remote Filtering on DataGrid</h2>
<div class="demo-info" style="margin-bottom:10px">
    <div class="demo-tip icon-tip">&nbsp;</div>
    <div>This sample shows how to apply remote filtering and pagination on a datagrid component.</div>
</div>

<table id="dg" title="DataGrid" style="width:700px;height:250px">
</table>
<img src="./libs/jquery/easyui/themes/icons/ok.png" onclick="optComplet();">
<script type="text/javascript">
    var optComplet = function(){
        alert(1111);
    };
    $(function(){
        ///
        $("#dg").datagrid({
            //rownumbers:true,
            singleSelect: true,
            pagination: true,
            url:'./data/datagrid_data1.json',
            columns: [
                [
                    {field:'opt',title:'',width:'25',align:'center',
                        styler:function(value,row,index){
                            return "<span id='opt_'"+index+"></span>>";
                        }
                    },
                    {field:'ord',title:'',width:'25',align:'center',
                        styler:function(value,row,index){
                            return {class:'datagrid-td-rownumber',style:'align:center'};
                        },
                        formatter:function(value,row,index){
                            //var opts = $.data(_203, "datagrid").options;
                            var _ord = 0;
                            var opts = $("#dg").datagrid("options");
                            if (opts.pagination) {
                                _ord += (opts.pageNumber - 1) * opts.pageSize + index + 1;
                            }
                            return "<div class=\"datagrid-cell-rownumber\" style='width:\'100%\',text-align:center'>" + _ord + "</div>";
                            //return _ord;
                        }
                    },
                    {field:'itemid',title:'Item ID',width:'80',align:'center'},
                    {field:'productid',title:'Product',width:'100',align:'center'},
                    {field:'listprice',title:'List Price',width:'100',align:'center',editor:{type:'numberbox',options:{precision:0,required:true}}},
                    {field:'unitcost',title:'Unit Cost',width:'100',align:'center'},
                    {field:'attr1',title:'Attribute',width:'100',align:'center'},
                    {field:'isDbClick',title:'是否双击过',hidden:true}
                ]
            ],
            onDblClickRow: function(index,row){
                $("#dg").datagrid("selectRow", index).datagrid("beginEdit", index);
                $("#opt_"+index).append("<img src='./libs/jquery/easyui/themes/icons/ok.png' onclick='optComplet();'>");
//                var fields = $("#dg").datagrid("getColumnFields");
//                fields.splice(0,1);
//                var updateRow = {};
//                $.each(fields, function(i,n){
//                    //
//                    if("isDbClick"==n){
//                        updateRow[n] = "YES";
//                    }else{
//                        updateRow[n] = row[n];
//                    }
//                });
//                $("#dg").datagrid("updateRow", {
//                    index: index,
//                    row: updateRow
//                });
//                console.log( fields );
//                console.log( row );
            }
        });
    });
</script>
</body>
</html>